<template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="货主名称：">
      <el-input v-model="form.ownerName" placeholder="请输入货主名称：" />
    </el-form-item>
    <el-form-item label="手机号：">
      <el-input v-model="form.ownerPhone" placeholder="请输入手机号"/>
    </el-form-item>
    <el-form-item label="驾驶证有效日期：">
      <el-col :span="11">
        <el-form-item prop="ownerDrivinglicenseDate">
          <el-date-picker
            v-model="form.ownerDrivinglicenseDate"
            type="date"
            aria-label="Pick a date"
            placeholder="请选择驾驶证有效日期"
            style="width: 200px"
              format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="chongzhi()">重置</el-button>
      <el-button type="primary" @click="DaoChu()">导出</el-button>
    </el-form-item>
  </el-form>

    <el-button type="primary" @click="TiaoAdd">新增</el-button>
    <el-button type="primary" @click="pishan">删除</el-button>

    <el-table :data="filterTableData" style="width: 100%" @selection-change="handleSelectionChange" >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="货主姓名" prop="ownerName" />
    <el-table-column label="手机号" prop="ownerPhone" />
    <el-table-column label="单位名称" prop="ownerUnit" />
    <el-table-column label="联系地址" prop="ownerAddress" />
    <el-table-column label="驾驶证有效日期" prop="ownerDrivinglicenseDate" >
      <template v-slot="yx" >
        {{ yx.row.ownerDrivinglicenseDate.split("T")[0] }}
      </template>
    </el-table-column>
    <el-table-column label="驾驶证照片" prop="ownerDrivinglicenseImg" >
      <template v-slot="zp" >
        <img :src="'http://47.96.140.177:8000/FoundationWrite/pic/'+zp.row.ownerDrivinglicenseImg" style="width: 80px;height: 80px;" />
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="ownerRemark" />
    <el-table-column label="创建时间" prop="createDate" >
      <template v-slot="sj">
        {{ sj.row.createDate.substring(0,10) }} {{ sj.row.createDate.substring(11,19) }}
      </template>
    </el-table-column>
    
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
        <el-button size="small" type="primary" @click="handleshow(scope.$index, scope.row)">
          查看
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <tr>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, slot ,sizes"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    数据/共{{ fen.pagecount }}页
  </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="slot,prev, pager"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
        <el-button @click="handleCurrentChange(1)" :disabled="fen.pageIndex==1" >首页</el-button>
  </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="fen.pageIndex"
      v-model:page-size="fen.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout=" next, slot,jumper"
      :total="fen.plistcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button @click="handleCurrentChange(fen.pagecount)" :disabled="fen.pageIndex==fen.pagecount" >尾页</el-button>
  </el-pagination>
      </td>
    </tr>
  </table>
</template>
<script setup lang=ts>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
//跳转添加页方法
const TiaoAdd = () => {
    router.push("/OwnerFoundationAdd")
}
//生命周期函数钩
onMounted(function () {
    onSubmit();
})
//查询条件
const form = ref({
    ownerName: "",
    ownerPhone: "",
    ownerDrivinglicenseDate: "",
})
//分页条件
const fen = ref({
    pageIndex: 1,
    pageSize: 2,
    plistcount: 0,
    pagecount:0
})
//显示字段
const filterTableData = ref([])
//显示方法
const onSubmit = () => {
    axios.get("FoundationRead/api/Owner/GetOwner", {
        params: {
            ownerName: form.value.ownerName,
            ownerPhone: form.value.ownerPhone,
            ownerDrivinglicenseDate: form.value.ownerDrivinglicenseDate,
            pageIndex: fen.value.pageIndex,
            pageSize:fen.value.pageSize
        }
    })
        .then(res => {
          filterTableData.value = res.data.data.plist;
            fen.value.plistcount = res.data.data.plistcount;
            fen.value.pagecount = res.data.data.pagecount;
            console.log(res.data.data)
    })
}
//分页方法
const handleSizeChange = (val: number) => {
  fen.value.pageSize = val;
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  fen.value.pageIndex = val;
  onSubmit();
}
//删除方法
const
  handleDelete = (index: number, row: any) => {
    
  ElMessageBox.confirm(
    '确定要删除嘛',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("FoundationWrite/api/Owner/DeleteOwner?ownerId=" + row.ownerId)
        .then(res => {
          if (res.data.data>0)
          {
            ElMessage.success("货主删除成功")
            onSubmit();
          }
          else  
          {
            ElMessage.error("货主删除失败")
            return;
          }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
    }
//批量删除
const pi:any = ref([])
const handleSelectionChange = (val: any) => {

  val.forEach((a:any) => {
    pi.value.push(a.ownerId);
  });
}
//批量删除方法
const pishan = () => {
  if (pi.value.length==0)
    {
      ElMessage.error("至少选中一项")
      return;
  }
  ElMessageBox.confirm(
    '确定要删除嘛',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(pi.value)
      axios.post("FoundationWrite/api/Owner/PiShanOwner", {
          
            ownreslist:pi.value
        
      })
    .then(res => {
      if (res.data.data>0)
      {
        ElMessage.success("批量删除成功")
        onSubmit();
      }
      else  
      {
        ElMessage.error("批量删除失败")
        return;
      }
    })
    })
  
}
//编辑
const handleEdit = (index: number, row: any) => {
  router.push({
    path: "OwnerFoundationUpdate",
    query: ({
      ownerId:row.ownerId
    })
  })
}
//查看
const handleshow = (index: number, row: any) => {
   router.push({
    path: "OwnerFoundationFanTian",
    query: ({
      ownerId:row.ownerId
    })
  })
}
//导出方法
const DaoChu = () => {
  location.href = `http://10.223.8.2:8000/ReadFoundation/api/Owner/OwnerExportScpreListToExcel?pageIndex=${fen.value.pageIndex}&pageSize=${fen.value.pageSize}&ownerName=${form.value.ownerName}&ownerPhone=${form.value.ownerPhone}&ownerDrivinglicenseDate=${form.value.ownerDrivinglicenseDate}`
}
//重置按钮
const chongzhi = () => {
  form.value.ownerName="",
  form.value.ownerPhone= "",
  form.value.ownerDrivinglicenseDate= ""
}
</script>